<template>
	<view>
		<view class="u-center padding-right padding-left">
			<view class="cu-list menu-avatar">
				<view class="cu-item margin-top-lg radius">
					<view class="cu-avatar round lg" :style="{ backgroundImage: 'url('+userInfo.avatar+')'}"></view>
					<view class="content">
						<view class="text-bold text-lg">{{userInfo.nickname}}</view>
						<view class="text-gray text-sm flex">{{userInfo.mobile}}<text class="cuIcon-write xl margin-left-sm" style="text-decoration: underline;"></text></view>
					</view>
					<view class="action">
						<navigator url="/pages/setting/index" hover-class="none">
							<view class="cuIcon-settings text-bold text-gray"></view>
						</navigator>
					</view>
				</view>
			</view>
		</view>
		<!-- 我的状态 -->
		<view class="cu-card dynamic">
			<view class="cu-item shadow">
				<view class="flex bg-white padding shadow-warp text-center">
					<view class="flex flex-sub flex-direction flex-direction solid-right" @click="sendRequest">
						<view class="">我的余额</view>
						<view class="margin-top-xs text-gray">100.5</view>
					</view>
					<view class="flex flex-sub flex-direction flex-direction solid-right">
						<view class="">当前佣金</view>
						<view class="margin-top-xs text-gray">100.5</view>
					</view>
					<view class="flex flex-sub flex-direction flex-direction">
						<view class="">优惠券</view>
						<view class="margin-top-xs text-gray">100.5</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 我的订单 -->
		<view class="cu-card dynamic">
			<view class="cu-item shadow">
				<view class="padding solid-bottom flex justify-between">
					<view>我的订单</view>
					<view @tap="navigateTo('/pages/order/index')">
						<text class="text-gray">全部订单</text><text class="cuIcon-right text-gray"></text>
					</view>
				</view>
				<view class="cu-list grid no-border" :class="['col-' + orderItems.length]">
					<view class="cu-item" v-for="(item,index) in orderItems" :key="index" @tap="navigateTo('/pages/order/index?status='+item.status)">
						<view class="text-red" :class="['cuIcon-' + item.icon]">
							<view class="cu-tag badge">{{item.status}}</view>
						</view>
						<text>{{item.name}}</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 我的服务 -->
		<view class="cu-card dynamic">
			<view class="cu-item shadow">
				<view class="padding solid-bottom">我的服务</view>
				<view class="cu-list grid col-4 no-border">
					<view class="cu-item" v-for="(item,index) in serviceItems" :key="index" @tap="navigateTo(item.url)">
						<view class="text-red" :class="['cuIcon-' + item.icon]"></view>
						<text>{{item.name}}</text>
					</view>
				</view>
			</view>
		</view>
		<!-- #ifdef MP -->
		<!-- 在父组件中的标签中监听该自定义事件，并添加一个响应该事件的方法 -->
		
		<!-- <zhi-authorize :isShow="false" ref="isShow"></zhi-authorize> -->
		<!-- 2020/6/20 修改，使用 @listemAuthorize 代替 this.$on() -->
		<zhi-authorize :isShow="false" ref="isShow" @listenAuthorize="getUserInfo"></zhi-authorize>
		<!-- #endif -->
	</view>
</template>

<script>
	const app = getApp()
	//import app from '../../App.vue'
	import util from '@/common/util.js'
	import zhiAuthorize from '@/components/zhi-authorize/zhi-authorize.vue'
	export default {
		components: {
			zhiAuthorize,
		},
		data() {
			return {
				userInfo: [],
				orderStatus: [], // 用户订单统计信息
				orderItems: [{
						name: '待付款',
						icon: 'pay',
						status: 0
					},
					{
						name: '待发货',
						icon: 'send',
						status: 1
					},
					{
						name: '待收货',
						icon: 'deliver',
						status: 2
					},
					{
						name: '待评价',
						icon: 'comment',
						status: 3
					},
					{
						name: '退款/售后',
						icon: 'refund',
						status: 4
					},
				],
				serviceItems: [{
						name: '会员中心',
						icon: 'my',
						url: '/pages/user/vip'
					},
					{
						name: '我的推广',
						icon: 'group',
						url: '/pages/distribution/index'
					},
					{
						name: '我的余额',
						icon: 'recharge',
						url: '/pages/user/account/index'
					},
					{
						name: '我的砍价',
						icon: 'goodsnew',
						url: '/pages/bargain/index'
					},
					{
						name: '我的收藏',
						icon: 'favor',
						url: '/pages/user/collection'
					},
					{
						name: '优惠券',
						icon: 'ticket',
						url: '/pages/user/coupon/index'
					},
					{
						name: '地址信息',
						icon: 'location',
						url: '/pages/user/address/index'
					},
					{
						name: '联系客服',
						icon: 'service',
						url: '/pages/user/login/index'
					},
				]
			}
		},
		onLoad() {
			// 2020/6/20修改，去掉这里
			/* uni.$on('listenAuthorize', (e) => {
				console.log(e);
				this.getUserInfo()
			}) */
		},
		onShow() {
			if (app.globalData.isLogin) {
				this.getUserInfo()
			}
		},
		methods: {
			/* 获取用户具体的数据，包括订单，需登录显示的按钮等 */
			async getUserInfo() {
				try {
					let res = await this.$api.userIndex({})
					this.userInfo = res.data.data
					//this.orderStatus = res.data.orderStatus
					
				} catch (e) {
					util.Toast(e.msg)
				}
				uni.$off('listenAuthorize')
			},
			// 页面跳转
			navigateTo(url) {
				// #ifdef MP
				if (getApp().globalData.isLogin) {
					uni.navigateTo({ url: url })
				} else {
					this.$refs.isShow.isAutoShow = true
				}
				// #endif
				// #ifdef H5
				console.log(e);
				uni.navigateTo({
					url: e
				})
				// #endif
			}
		}
	}
</script>

<style>
	.u-center {
		height: 200rpx;
		background-color: #e93323 !important;
		position: relative;
	}

	.u-center::after {
		position: absolute;
		left: 0;
		right: 0;
		bottom: -98rpx;
		z-index: -1;
		content: '';
		height: 100rpx;
		width: 100%;
		border-radius: 0 0 50% 50%;
		background-color: #e93323;
	}

	.cu-card>.cu-item {
		margin: 15rpx 30rpx;
	}
</style>
